<template>
  <el-dialog
    custom-class="generatePreviewCode"
    :visible.sync="dialogVisible"
    title="代码预览"
    top="0px"
    width="80%"
    :before-close="handleClose"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="(item, index) in codes"
        :key="index"
        :label="item.name"
      >
        <pre
          v-if="activeName == index"
        ><div class="copy" @click="copy(item.code)"><i class="el-icon-document-copy"></i>复制</div><code :class="'language-'+ item.language">// {{ item.name }}
            
{{ item.code }}</code></pre>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
// 导入highlight.js库
import hljs from "highlight.js";
// 导入所需的样式，例如：默认样式
import "highlight.js/styles/atom-one-dark.css";
export default {
  name: "PreviewCode",

  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      activeName: 0,
      codes: [
        {
          name: "index.vue",
          language: "html",
          code: `<template>
  <div class="app-container">

    <el-table v-loading="loading" :data="logList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="任务日志ID" align="center" prop="jobLogId" />
      <el-table-column label="任务名称" align="center" prop="jobName" />
      <el-table-column label="任务组名" align="center" prop="jobGroup" />
      <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" />
      <el-table-column label="日志信息" align="center" prop="jobMessage" />
      <el-table-column label="执行状态" align="center" prop="status" />
      <el-table-column label="异常信息" align="center" prop="exceptionInfo" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:log:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:log:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
          `,
        },
        {
          name: "test.vue",
          language: "js",
          code: `<template>
  <div class="app-container">

    <el-table v-loading="loading" :data="logList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="任务日志ID" align="center" prop="jobLogId" />
      <el-table-column label="任务名称" align="center" prop="jobName" />
      <el-table-column label="任务组名" align="center" prop="jobGroup" />
      <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" />
      <el-table-column label="日志信息" align="center" prop="jobMessage" />
      <el-table-column label="执行状态" align="center" prop="status" />
      <el-table-column label="异常信息" align="center" prop="exceptionInfo" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:log:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:log:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
          `,
        },
      ],
    };
  },

  computed: {
    dialogVisible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },

  watch: {
    // 监听 highlightedCode 数据的变化
    activeName: {
      handler() {
        this.$nextTick(() => {
          this.updateLineNumbers();
        });
      },
      deep: true, // 深度监听对象内部的变化
    },
  },

  mounted() {},

  methods: {
    handleClose() {
      this.$emit("update:show", false);
    },
    updateLineNumbers() {
      // 搜索pre、code元素进行高亮和行号添加
      let blocks = this.$el.querySelectorAll("pre code");
      blocks.forEach((block) => {
        hljs.highlightElement(block);
      });
    },
    copy(code) {
      var input = document.createElement("input");
      input.value = code;
      input.style.position = "fixed";
      input.style.top = "-100vh";
      document.body.appendChild(input);
      input.select();
      document.execCommand("copy");
      document.body.removeChild(input);
      this.$message({
        type: "success",
        message: "复制成功",
      });
    },
  },
};
</script>

<style lang="scss">
.generatePreviewCode {
  margin: 0;
  margin-top: 10vh !important;
  margin-left: 10vw;
  padding: 0;
  width: 80vw;
  height: 80vh;
  background: #fff;
  border-radius: 20px;

  .el-dialog__body {
    padding-top: 10px;
    height: calc(100% - 54px);
    box-sizing: border-box;

    .el-tabs {
      height: 100%;
      display: flex;
      flex-direction: column;

      .el-tabs__content {
        height: 0;
        flex: 1;
        box-sizing: border-box;

        .el-tab-pane {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
        }

        pre {
          margin: 0;
          width: 100%;
          height: 100%;
          position: relative;
          padding: 40px 20px 20px 20px;
          background: #282c34;
          border-radius: 10px;
          box-sizing: border-box;
          overflow: hidden;
          .copy {
            position: absolute;
            top: 10px;
            right: 20px;
            width: 60px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            color: #ffffff;
            font-size: 14px;
            border-radius: 5px;
            cursor: pointer;
            user-select: none;
            transition: all 0.1s;

            i {
              margin-right: 5px;
            }
          }

          .copy:hover {
            color: #0099ff;
          }

          code {
            margin: 0;
            display: block;
            width: 100%;
            height: 100%;
            padding: 0;
            font-family: "monospace";
            font-size: 14px;
            line-height: 21px;
            overflow: auto;
            box-sizing: border-box;
          }
          code::-webkit-scrollbar {
            width: 10px;
            height: 10px;
          }

          code::-webkit-scrollbar-thumb {
            background: #515151;
            border-radius: 5px;
          }

          code::-webkit-scrollbar-track {
            background: transparent;
          }
        }

        pre::before {
          position: absolute;
          content: "";
          left: 0;
          top: 15px;
          width: 10px;
          height: 10px;
          background: transparent;
          border-radius: 50%;
          border-radius: 5px;
          box-shadow: 15px 0 0px 1px #38e216, 35px 0 0px 1px #ecda33,
            55px 0 0px 1px #e25712;
        }
      }
    }
  }
}
</style>
